<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      margin-left: 300px;
    }

    .trHight {
      height: 30px;
    }

    span {
      color: brown;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="./img/index.jpg" alt="">
    <!-- border最外层边框 -->
    <table border="1px" cellspacing="0">
      <!-- 表格头部 -->
      <thead height="50" align="center" valign="middle">
        <tr>
          <th colspan="2">注册信息 填写信息（*必须填写）</th>
        </tr>
      </thead>
      <!-- 表格主体 -->
      <tbody align="left" valign="middle">
        <tr class="trHight">
          <td width='200px' align="right" valign="middle">用户名：</td>
          <td width='753px'><input type="text" id="userName"><span>*请填写5至20位数字、字母或下划线作为用户名，请不要输入汉字或其他符号</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">密码：</td>
          <td><input type="password" id="password"><span>*大写字母+小写字母+数字的8至15位字符组合</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">确认密码：</td>
          <td><input type="password" id="checkPassword"><span>*</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">考生姓名：</td>
          <td><input type="text" id="name"><span>*姓名中间请不要输入空格,注册后不能修改!</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">证件类型：</td>
          <td><select name="idType" id="idType" style="width: 170px">
              <option value=" idCard" selected>身份证</option>
              <option value="carCard">驾驶证</option>
              <option value="stuCard">学生证</option>
            </select><span>*注册后不得自行修改</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">证件号码：</td>
          <td><input type="number" id="idNumber"><span>*注册后不得自行修改</span></td>
        </tr>
        <tr height='130px'>
          <td align="right" valign="middle">学历：</td>
          <td></td>
        </tr>
        <tr height='130px'>
          <td align="right" valign="middle">学位：</td>
          <td></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">学历学位注意事项：</td>
          <td>1.系统对2002年至今大专以上(含大专)的学历信息2008年9月至今的学位信息进行在线核验。<br>
            2.学历信息最少填写1条信息，最多可填写5条信息。<br>
            3.学位信息最多可填写5条信息，无学位信息可不填写<br>
            4.请如实准确填写学历、学位信息，保存后无法删除。<br>
            5.学历学位信息在线核验状态为“未核验”的，请24小时后，登录系统查看核验状态<br>
            6.学历学位信息在线核验“未通过”或“需人工核育”的不会影响后续报名,须在报名开始后按报名地资格审核部门</td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">密码找回问题：</td>
          <td><input type="text" id="question"></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">答案：</td>
          <td><input type="text" id="answer"><span>*请牢记问题答案，忘记密码需找回时要用到</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">邮箱：</td>
          <td><input type="email" id="email"><span>*本人现用邮箱</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">手机号：</td>
          <td><input type="number" id="phone"><span>*注册后自动绑定手机，用于发送短信或重要操作身份认定，务必填写本人现用手机</span></td>
        </tr>
        <tr class="trHight">
          <td align="right" valign="middle">短信验证码：</td>
          <td><input type="text" id="massage"><span>*</span><button>获取短信验证码</button></td>
        </tr>
        <tr class="trHight" align="center">
          <td colspan="2"><button>提交</button><button>找回</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script>
  var userName = document.getElementById('userName')
  var password = document.getElementById('password')
  var checkPassword = document.getElementById('checkPassword')
  var name = document.getElementById('name')
  var idType = document.getElementById('idType')
  var idNumber = document.getElementById('idNumber')
  var userName = document.getElementById('userName')
  var question = document.getElementById('question')
  var answer = document.getElementById('answer')
  var email = document.getElementById('email')
  var phone = document.getElementById('phone')
  var massage = document.getElementById('massage')
  userName.onblur = function (e) {
    var v = userName.value
    console.log(v)
    var reg = /\w{5,20}/g
    console.log(typeof reg);
    if (!reg.test(v)) {
      alert('格式错误')
    }

  }
  password.onblur = function (e) {
    var v = password.value
    console.log(v)
    var reg = /(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9]).{8,15}/g
    if (!reg.test(v)) {
      alert('格式错误')
    }
  }
  checkPassword.onblur = function (e) {
    var v = checkPassword.value
    console.log(v)
    var reg = /(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9]).{8,15}/g
    if (!reg.test(v)) {
      alert('格式错误')
    }
  }
  idNumber.onblur = function (e) {
    var v = idNumber.value
    console.log(v)
    var reg = /\d{18}/g
    if (!reg.test(v)) {
      alert('格式错误')
    }
  }

  email.onblur = function (e) {
    var v = email.value
    console.log(v)
    var reg = /\w+@\w+\.\w+/g
    if (!reg.test(v)) {
      alert('格式错误')
    }
  }
  phone.onblur = function (e) {
    var v = phone.value
    console.log(v)
    var reg = /1[345678]\d{9}/g
    if (!reg.test(v)) {
      alert('格式错误')
    }
  }
  massage.onblur = function (e) {
    var v = massage.value
    console.log(v)
    var reg = /(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9]).{4}/g
    if (!reg.test(v)) {
      alert('格式错误')
    }
  }
</script>

</html>